<template>
  <div>
    <Header :active="6"/>
    <div class="customer-content">
      <div class="banner">
        <img  style="width: 100%"  src="../../static/image/customer-banner.png">
        <!--<div class="common-min-width">
          <div class="common-width">
            <div class="common-width" style="position: absolute; top: 0px; height: 460px ; text-align: center;line-height: 93px; padding-top: 186px;">
              <h1 style="color: #6D7278;font-size: 61px;font-weight: 400;">
                OURCUSTOMERS
                <br>
                <font style="color: #ffffff">我们的客户</font>
              </h1>
            </div>
          </div>
        </div>-->
      </div>
      <div class="common-width content">
        <div class="search-type" style="padding-top: 102px; padding-bottom: 28px; text-align: center;">
          <el-select  @change="select" placeholder="行业">
            <el-option
              v-for="item in industry"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select @change="selectType"  placeholder="类型">
            <el-option
              key="-1"
              label="全部"
              value="-1">
            </el-option>
            <el-option
              key="0"
              label="医疗"
              value="0">
            </el-option>
            <el-option
              key="1"
              label="体育"
              value="1">
            </el-option>
            <el-option
              key="2"
              label="政府"
              value="2">
            </el-option>
            <el-option
              key="3"
              label="其他"
              value="3">
            </el-option>
          </el-select>
        </div>
        <div class="customer-list">
          <el-row :gutter="21" v-if="key%3==0" v-for="item,key  in client" :key="key">
            <el-col :span="8" v-if="keys>=key&&keys<key+3"   v-for="items,keys in client" :key="keys" >
              <div class="grid-content">
                <a  @click="customerDetail(items.id)">
                  <div class="photo">
                    <img :src=items.photo>
                  </div>
                  <div class="description">
                    <div class="title">{{items.title}}</div>
                    <div class="desc">{{items.description}}</div>
                  </div>
                </a>
              </div>
            </el-col>
          </el-row >


        </div>
      </div>
      <div class="desc001">
        <span>期待未来</span><span>，技术解决方案变革产品创建与服务方式</span>
      </div>


    </div>
    <Footer/>
  </div>
</template>
<script>

  import Header from '@/components/Header'
  import Footer from '@/components/Footer'

  export default {
    components: {Header, Footer},
    filters: {},
    data() {
      return {
        industry: [],
        type: [],
        client:[],
        oldClient:[]
      }
    },
    mounted() {


    },
    watch: {
      "$route": "reload"    //后面是methods中的一个方法
    },

    created() {
      let _self = this;
      _self.$store.dispatch('client', {}).then(response => {
        this.client = response.data.clients;
        this.oldClient = response.data.clients;
        this.industry = response.data.industry;
        this.type = response.data.type;
      }).catch(() => {
      })
    },
    methods: {
      fetchData() {
        let _self = this;
        _self.$store.dispatch('statisticsProjectStatus', {}).then(response => {
          _self.list = response.data;
          _self.total = response.count;
        }).catch(() => {
        })
      },
      customerDetail(id){
        window.location.href = "#/customer/" + id ;
      },
      select(data){
        if(data==47){
          this.client=this.oldClient;
          return;
        }
        this.client = [];
        let c = this.oldClient;
        for (let i in c) {
          if(c[i].categoryId==data){
            this.client.push(c[i]);
          }
        }
      },
      selectType(data){
        if(data==-1){
          this.client=this.oldClient;
          return;
        }
        this.client = [];
        let c = this.oldClient;
        for (let i in c) {
          if(c[i].typeId==data){
            this.client.push(c[i]);
          }
        }
      }
    }
  }

</script>
<style>
#app{
  background-color: #F0F2F5;
}
  .search-type .el-select{
    width: 138px;
  }
  .search-type .el-select .el-input__inner{
    border: none;
    background-color: #F0F2F5;
  }
  .search-type .el-input{
    width: 68%;
  }
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
  background-color:#ffffff;
  color: #379FD4;
}
</style>
